import React from 'react'
import './index.css'
import { WingBlank, WhiteSpace,NavBar,Flex,Toast,InputItem } from 'antd-mobile'
import {API} from '../../utils'
import {Link} from 'react-router-dom'
// 导入 withFormik
import { withFormik,Form,Field,ErrorMessage } from 'formik'
// 导入 Yup
import * as Yup from 'yup'

/*
    1 添加状态：username 和 password
    2 使用受控组件方式获取表单元素值
    3 给 form 表单添加onSubmit
    4 创建方法 handleSubmit ,实现表单提交
    5 方法中，通过username 和 password 获取到账号密码
    6 使用API调用登录接口，将username和password 作为参数
    7 判断返回值 status 为 200 时，标识登陆成功
    8 登录成功后，将Token保存到本地存储中(renthouse_token)
    9 返回登录页
*/

//  验证规则：
 const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
 const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

/*
    给登录功能添加表单验证：
    1 安装 yarn add yup,导入 Yup
    2 在 withFormik 中添加配置项 validationSchema ,使用 Yup 添加表单校验规则
    3 在 Login 组件中，通过 props 获取到 errors(错误信息) 和 touched(是否访问过，注意：需要给表单元素添加 handleBlur 处理失去焦点才生效)
    4 在表单元素中通过这两个对象展示表单校验错误信息
*/

export default class Login extends React.Component {
    state = {
        username: '',
        password: ''
    }
    getUserName = e =>{
        this.setState({
            username:e.target.value
        })
    }
    getPassword = e =>{
        this.setState({
            password:e.target.password
        })
    }
    // 表单提交
    handleSubmit = async e =>{
        // 阻止表单提交默认行为
        e.preventDefault()
        // 获取账号密码
        const {username,password} = this.state
        console.log(username,password);
    }
    render(){
        const {username,password} = this.state

        // 通过 props 获取高阶组件传递进来的属性
        const {values,handleSubmit,handleChange,handleBlur,errors,touched} = this.props
        // console.log(values,handleSubmit,handleChange);
        return (
            <div>
                <NavBar
                  mode="light"
                //   onLeftClick={() => console.log('onLeftClick')}
                >账号登录</NavBar>
                <WhiteSpace size="xl"/>

                <WingBlank>
                    <Form>
                        <div className="formItem">
                            <Field className="input" name="username" 
                            placeholder="请输入账号" />
                        </div>
                        <ErrorMessage className="error" name="username" component="div" />
                        {/* 长度为5-8位，只能出现数字、字母、下划线 */}
                        {/* <div className="error">账号为必填项</div> */}
                        <div className="formItem">
                            <Field className="input" name="password" 
                            placeholder="请输入密码"></Field>
                        </div>
                        <ErrorMessage className="error" name="password" component="div" />
                        {/* 长度为5-8位，只能出现数字、字母、下划线 */}
                        {/* <div className="error">密码为必填项</div> */}
                        <div className="formSubmit">
                            <button className="submit" type="submit">
                                登录
                            </button>
                        </div>
                    </Form>
                    <Flex className="backHome">
                        <Flex.Item>
                            <Link to="/register">还没有账号，去注册~</Link>
                            {/* <div>还没有账号，去注册~</div> */}
                        </Flex.Item>
                    </Flex>
                </WingBlank>
            </div>
        )
    }
}

// 使用 withFormik 高阶组件包装 Login 组件,为 Login 组件提供属性和方法
Login = withFormik({
    // 提供状态
    mapPropsToValues:() => ({username:'',password:''}),

    // 添加表单规则
    validationSchema:Yup.object().shape({
        username:Yup.string().required('账号为必填项').matches(REG_UNAME,'长度为5-8位，只能出现数字、字母、下划线'),
        password:Yup.string().required('密码为必填项').matches(REG_PWD,'长度为5-12位，只能出现数字、字母、下划线')
    }),

    // 表单提交时间
    handleSubmit:async (values,{props}) => {
        const {username,password} = values
        const res = await API.post('/user/login',{
            username,
            password
        })
        const {status,body,description} = res.data
        if(status === 200){
            localStorage.setItem('renthouse_token',body.token)
            // 注意：无法在该方法中，通过this来获取路由信息
            if (!props.location.state) {
                // 此时，标识直接进入该页面
                props.history.go(-1)
            } else {
                // push:[home,login,map]
                // replace [home,map]
                props.history.replace(props.location.state.from.pathname)
            }
            // 所以，需要通过第二个对象参数中获取到props来使用props
            props.history.go(-1)
        } else {
            Toast.info(description,2,null,false)
        }
    }
})(Login)

// 注意：此处返回的时高阶组件包装后的组件
// export default Login